<template>
  <div class="mainPage">
    <div class="content-header">
      <div>{{ DBInfo.IP }}，数据库名:{{ DBInfo.DB_SID }}</div>
      <router-link style="font-size:16px" :to="{ name: 'NodeUsability' }"
        >关闭</router-link
      >
    </div>
    <div class="content-main">
      <div class="container-fluid">
        <div id="wrap">
          <div class="item">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>表空间大小</span>
              </div>
              <div>
                <vDBLogSpace />
              </div>
            </el-card>
          </div>
          <div class="item">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>日志空间使用</span>
              </div>
              <div>
                <vDBTableSpace />
              </div>
            </el-card>
          </div>
          <div class="item">
            
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>等待事件</span>
              </div>
              <div>
                <vDbWaitEvent />
              </div>
            </el-card>
          </div>
          <div class="item">
            
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>IO详情</span>
              </div>
              <div>
                <vDBIoDetail />
              </div>
            </el-card>
          </div>
          <div class="item">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>会话</span>
              </div>
              <div>
                <vDbSession />
              </div>
            </el-card>
          </div>
          <div class="item">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>备份</span>
              </div>
              <div>
                <vDBBackup />
              </div>
            </el-card>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
import { GetItem } from "@/utils/dataStore";
import vDBBackup from "./component/DbBackup.vue";
import vDBLogSpace from "./component/DbLogSpace.vue";
import vDBTableSpace from "./component/DbTableSpace.vue";
import vDBIoDetail from "./component/DbIoDetail.vue";
import vDbSession from "./component/DbSession.vue";
import vDbWaitEvent from "./component/DbWaitEvent.vue";
export default {
  components: {
    vDBBackup,
    vDBLogSpace,
    vDBTableSpace,
    vDBIoDetail,
    vDbSession,
    vDbWaitEvent,
  },
  created() {
    GetItem(sessionStorage.getItem("PushId")).then((_) => {
      this.DBInfo = _[0].articleAddress;
    });
  },
  data() {
    return {
      DBInfo: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.mainPage {
  background: #ededed;
  min-height: 97vh;
  width: 100%;
  overflow-y: scroll;
  .content-header {
    padding: 15px;
    font-size: 1.25rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .content-main {
    padding: 15px;
    .container-fluid {
      width: 100%;
      /deep/ .el-card__body {
        padding: 0 0 20px 0;
      }
      #wrap {
        width: 100%;
        column-count: 2; /* 列数 */
        column-gap: 10px; /* 列与列之间的距离 */
      }

      #wrap .item {
        break-inside: avoid;
        margin-bottom: 15px;
      }
      .callout-info {
        border-left-color: #117a8b;
        .head {
          font-size: 1rem;
          i {
            font-style: normal;
          }
        }
        .main {
          font-size: 0.9rem;
        }
      }
      .mainPage-info-box {
        padding: 5px;
        .left {
          border-radius: 0.25rem;
          -ms-flex-align: center;
          align-items: center;
          display: -ms-flexbox;
          display: flex;
          font-size: 1.875rem;
          -ms-flex-pack: center;
          justify-content: center;
          text-align: center;
          width: 70px;
          min-height: 70px;
        }
      }
    }
  }
}
.mainPage::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.mainPage::-webkit-scrollbar-thumb {
  background-color: rgba(4, 44, 119, 0.7);
  border-radius: 3px;
}

::v-deep .el-card.is-always-shadow {
  box-shadow: 0 0 1px #00000021, 0 1px 3px #0003;
}
</style>
